<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins',sans-serif;
            scroll-behavior: smooth;
        }
        body{
            min-height: 100vh;
            overflow-x: hidden;
            background: linear-gradient(#2b1055,#7597de);
        }
        header{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 30px 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10000;
        }
        header .logo{
            color: #fff;
            font-weight: 700;
            text-decoration: none;
            font-size: 2em;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        header ul{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        header ul li{
            list-style: none;
            margin-left: 20px;
        }
        header ul li a{
            text-decoration: none;
            padding: 6px 15px;
            color: #fff;
            border-radius: 20px;
        }
        header ul li a:hover,
        header ul li a.active
        {
            background: #fff;
            color: #2b1055;
        }
        section{
            position: relative;
            width: 100%;
            height: 100vh;
            padding: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        section::before{
            content: '';
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
            background: linear-gradient(to top,#1c0522,transparent);
            z-index: 1000;
        }
        section img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
        }
        section img#moon{
            mix-blend-mode: screen;
        }
        section img#mountains_front{
            z-index: 10;
        }
        #text{
            position: absolute;
            right: -350px;
            color: #fff;
            white-space: nowrap;
            font-size: 7.5vw;
            z-index: 9;
        }
        #btn{
            text-decoration: none;
            display: inline-block;
            padding: 8px 30px;
            border-radius: 40px;
            background: #fff;
            color: #2b1055;
            font-size: 1.5em;
            z-index: 9;
            transform: translateY(100px);
        }
        .sec{
            position: relative;
            padding: 100px;
            background: #1c0522;
        }
        .sec h2{
            font-size: 3.5em;
            margin-bottom: 10px;
            color: #fff;
        }
        .sec p{
            font-size: 1.2em;
            color: #fff;
        }
    </style>
</head>
<body>
<header>
    <a href="#" class="logo">logo</a>
    <ul>
        <li><a href="#" class="active">1111</a></li>
        <li><a href="#">2222</a></li>
        <li><a href="#">3333</a></li>
        <li><a href="#">4444</a></li>
    </ul>
</header>
<section>
    <img src="" id="stars">
    <img src="" id="moon">
    <img src="" id="mountains_behind">
    <h2 id="text">555</h2>
    <a href="#sec" id="btn">6666</a>
    <img src="" id="mountains_front">
</section>
<div class="sec" id="sec">
    <h2>半人半鱼之神</h2>
    <p>我是在精神明显紧张的状态下撰写此文的。因为到明晚，我将不复存在。我身无分文，在唯一能维持生命的药物中断了时，将再也不堪忍受精神的折磨；我将从顶楼这个窗口跳到下面肮脏的大街上去。不要从薪俸和吗啡上来断定我是一个弱者或是一个堕落者。等你阅毕这几页草草写就的文字时，你也许会料想我为什么非得忘却一切，或非得寻死的原因，但你决不会完全料及这一原因。
        在茫茫太平洋最开阔也是最没有人去的一块海域上，我押运的邮船成了德国军舰的牺牲品。那时，大战刚起，德国佬的海军力量还没有被削弱到后来的地步，我们的押运船自然也成了他们的战利品。但另一方面，由于德国佬收编了我们这些战俘，我们也就理所当然地受到了公正、客气的对待。德国佬的军纪很松散。在我们被俘后的第5天，我便有了机会，找到一条小船独自逃走。船上备足了可用很长一段时间的水和食品。
        当我最终发现小船在随波逐流时，我如坠五里雾中。我从来就不是合格的航海者，因而只能依据太阳<br><br>和星星的位置，模糊地推断自己处在赤道偏南一点的地方。我对经度一窍不通，而且当时又看不到任何岛屿或海岸。天气一直很晴朗。在灼热的阳光下，我漫无目标地漂流了不知多少天，期待着有艘路过的船，或被海浪抛到某块可居住的陆地上去。然而一望无际波涛汹涌的大海，我开始感到绝望。
        奇迹在我睡眠时发生了。但到底是怎样发生的，我将永远不得而知，因为我的睡眠尽管多梦不安，但从未中断过。最后醒来我竟发现自己的一半身子陷进了一片可怕的黑黏泥地之中。黏泥地呈一丝不变的起伏形状，从我的周围一直延伸到我能看得到的地方。小船也搁浅在黏泥地上，离我有些距离。
        你很有可能会猜想我的第一反应将是对如此意想不到的巨变感到惊讶。但事实上，与其说是惊讶，倒不如说是恐怖，因为空中和泥中都透出一种令我不寒而栗的不祥之兆。这一带充满了各种腐臭味。它们是从腐烂的鱼体和辨不清何物的尸体上散发出来的。或许，我不该用语言叙述这种恐怖，这是万籁俱寂极目无际的不毛之地中存在着的无法形容的恐怖。这儿，除了一大片黑沉沉的黏泥地外，再也看不到任何东西，也听不到任何声音。这死气沉沉的地方使我深感压抑，严心和恐惧。太阳从空中直射下来，然而在我看来，天空几乎也是黑沉沉的，残酷得不见云层，这天空恰似被我脚下漆黑的泥地反照一般。
        我爬进了搁浅着的小船，意识到只有一种理论能解释我的处境。经过某一史无前例的火山剧变，有块海底被隆上海面，形成了陆地，而这块陆地在深不可测的海底已蕴藏了无数个百万年之久。在我脚下隆起的这块新大陆十分恢宏十分荒凉，我竖起耳朵也听不到汹涌澎湃的大海传来的最微弱的声音。我举目远眺也看不到任何的海鸟。
        一连好几个小时我都坐在船上沉思默想。小船侧身搁浅着，当太阳在空中移动时，才提供了一点荫凉。随着白天<br><br>的消逝，黏泥地失去了不少黏性，干涸得似乎可以让人短时行走。那晚，我难以成眠。第二天，我便打点好带有水和食品的行李，准备去陆地旅行，寻觅消失的大海，寻求可能的救援。
        第三天早上，泥地已干涸得可以自由行走。与此同时，死鱼发出的气味与日俱增，臭不可挡。不过，我对这区区小灾已毫不介意，因为我必须顾及大事。我开始大胆地出发寻找未知的目的地。在这此起彼伏的旷野中，我整天都以远处最高的一个圆丘为目标，朝西稳步前进。晚上，我露宿休息。次日，我继续前进，尽管圆丘看上去似乎并没有比我起先前见它时要近些。到第四天晚上，我终于到达圆丘脚下。其实，圆丘要比远处望到的高得多，它由一条横在中间的波谷隆起，坡度较陡。我疲惫，无力登山，倒睡在山影之下。
        我不明白那晚我为什么老做恶梦。在渐渐亏缺的奇特月亮远在东边的平原上升起之前，我出了一身冷汗醒了过来。恶梦难耐，我决定不再入睡。月光下，我倏然悟出白天行走真是愚蠢之举，假若不在灼热的阳光下行走，我本可省却不少体力。现在，我清楚地感到能在日落时向阻碍我的山坡进军。拾掇好行李，我开始朝山顶爬去。
        我曾说过那连绵起伏的大荒原是我模糊恐惧感的来源。但当我登上山顶，顺着另一边山坡往下看，看到一条月光尚未照至其漆黑深处的大峡谷时，恐惧感顿然倍增。我顿觉自己是站在了世界的边缘上，凝视着深不可测与黑暗共存的谷底。随着恐惧的加剧，我不由地浮想起《失乐园》一书的奇特情节和撒旦可怕地爬过未成形的黑暗之国的奇异情景。
        月亮爬得更高了，我开始看到峡谷的坡度并不像我原先想象的那么大。突出的岩为<br><br>下山提供了相当方便的落脚点，并且从踩着岩石艰难地往下爬到较为平坦的山坡上，后站在那儿目不转睛地注视着月光仍未照及的阴森森的谷底。
        骤然间，我的注意力被对面山上一个巨大而又异常的物体所吸引。此物陡直而立，离我百码光景，在半空中月亮的照射下熠熠生辉。我随即搞清那是一块巨大的石头，但又注意到它的外形和位置并非天公所作。再仔细一看，倒使我充满了难以名状的感觉。尽管此物身躯庞大，且位置又处在自世界初期起就已在海底豁开的一个深渊之中，但我坚信这一奇特的物体是造型恰到好处的独石柱。它那庞大的身躯与既能生活又能思考的动物的手艺或崇拜不无关系。
        在既茫然又害怕的同时，我倒也有一种科学家和考古学家才会一时产生的快感。于是，我便更加仔细地环顾周围。月上中天，月光清澈而又不可思议地照在了深渊周围的悬崖峭壁上。猛然间，我看到有股山水从高处飞泻而下，几乎溅到了我站在山坡上的双脚，继而沿着蜿蜒的溪道朝两个方向奔腾而去。水波冲洗了深渊对面巨大的独石柱底基。底基上刻有碑文和粗糙的雕饰。碑文是用我看不懂并且从未在书中见过的象形文字刻写而成的。大多数象形文字以简单化的象征表示诸如鳗鱼、章鱼、鲸鱼，甲壳类动物、软体动物等海生动物。少数几个象形文字则显然表示世人所不熟悉的海生动物，不过对其腐烂的形状，我倒在海洋隆起的平原上目睹过。
        然而，最使我着迷的是生动的雕饰。在溪涧对面，硕大无朋的系列浮雕清晰可见，其题材会使像多雷这样的插图画家羡慕不已。我想这些浮雕该是用来描绘人的——至少是某一类人，尽管所雕之物像鱼一样在某个海洞中姿意嬉戏，或在浪涛之下出现的某个极大的神殿中举行效忠仪式。对它们的形态我不敢细说，因为仅看一眼它们的外形，就会令我昏厥。这些东西长得奇形怪状，其丑态超过了像埃德加·艾伦·坡或布沃尔这些作家的想象力。但除了带蹼的手脚，惊人的宽厚嘴唇，目光呆滞的凸眼以及其他回忆起来起来更令人不悦的特征外，它们总体上具有人的形体。够奇的是，这些半人半鱼被雕刻得与它们的实情很不相符，其中有条半人半鱼欲要杀死一条并非比它本身大多少的鲸鱼。根据它们古怪的模样和肥大的身躯，我很快得出结论：它们只不过是某个原始捕鱼部落或航海部落想象中的神，这一部落在波尔舟人和尼安德特人的始祖出世前好几个时代就已灭亡。此番情景恐怕连最具探险精神的人类学家都尚未见识过，对此意外遭遇我恐惧得呆如木鸡，直到月光奇迹般地投射在我面前的寂静的山谷里。
        突然，我看见了它。伴随着其要露出水面而发出的轻微搅动声，此物悄然出现在黑色的水面上。它身材高大，面目可憎，酷似独眼<br><br>巨人波吕斐摩斯。它如同恶梦中的巨大怪物一样飞快地奔向独石柱，然后在独石柱旁猛烈地挥动其一双巨大的带鳞手臂，并低下其可怕的头，发出某种有节奏的声音。我想我当时一定是疯了。
        我是如何发疯似是而非地登上山坡和悬岩，又是如何发疯似地回到搁浅的小船上，对此我几乎回忆不起来了，但我相信我曾狂叫过，也狂笑过。我模糊地记得回到船上后不久，天下起了一场狂风暴雨。不管怎么说，我清楚地听到了隆隆的雷鸣声和其他声音，这是大自然在其心情最不好时才会发出的声音。
        当我走出阴影时，我躺在旧金山的一家医院里，我是在太平洋中被美国船搭救并护送到那里的。在医院里，我神志失常时说了不少话，但发现别人对我的话并不怎么在意。对太平洋中隆起的陆地一事，甚至连我的援救者也毫无所知。以后，我找到一位大名鼎鼎的生态学家，并逗问他有关腓力斯人对半人半鱼之神，即鱼神的传说中的一些古怪问题，但顷刻发现他未能免俗，言不及义，令人失望，也就不再向他逼问。
        每当夜幕降临，尤其当月亮亏缺不圆时，我能看见它。我试用了吗啡，但它只有短暂的药效，却使我像一个绝望的奴隶一样深深地陷入了它的魔掌，无法逃脱。因此，在写下了一篇供我的同胞参考或耻笑的完整记事后，我现在就开始彻底断药。我常问自己这是不是一个纯粹的幻觉——一种仅是从德国兵那儿逃跑后，在没有甲板的船上中暑发高烧时讲着胡话的反常行为。然而，每当我向自己提出这个问题时，在我的面前总会出现一幕非常清晰的令人局促不安的画面。我一想到大海就对那些不知何物的尸体怕得发抖。因为它们此时此刻可能正在泥泞的海底挣扎着爬行，去敬奉它们古老的石偶，并把同它们自己很相似的可憎之物雕刻在海底那渗透了水的大理石碑上。我梦想有朝一日它们能浮上海面，用其冒着血腥气的爪子把被战争搞得筋疲力尽的弱小的人类残余者拉下海去——有朝一日大地下沉，黑色的海底上升到宇宙中的混乱不堪的地方去。
        末日即将来临。我听到了门上发出的响声，似是某个庞大的滑行躯体在笨拙地撞击房门。它不该找我。天啊，那只手！窗口！窗口！</p>
</div>
<script>
    let stars = document.getElementById('stars');
    let moon = document.getElementById('moon');
    let mountains_behind = document.getElementById('mountains_behind');
    let text = document.getElementById('text');
    let btn = document.getElementById('btn');
    let  mountains_front = document.getElementById('mountains_front');
    let header = document.querySelector('header');
    window.addEventListener('scroll',function (){
        let value = window.scrollY;
        stars.style.left = value*0.25 +'px';
        moon.style.top = value*1.05+'px';
        mountains_behind.style.top = value*0.5+'px';
        mountains_front.style.top = value*0+'px';
        text.style.marginRight = value*4+'px';
        text.style.marginTop = value*1.5+'px';
        btn.style.marginTop = value*1.5+'px';
        header.style.top = value*0.5+'px';
    })
</script>
</body>
</html>